<template>
    <div class="bg">
        <div class="edit-wrap" :style="{ height: outlineIconHeight + 'px' }">
            <vue-cropper
                ref="clipImg"
                :img="options.img"
                :autoCrop="true"
                :outputType="options.outputType"
                :info="true"
                :maxImgSize="400"
                :autoCropWidth="outlineIconWidth"
                :autoCropHeight="outlineIconHeight"
            ></vue-cropper>
            <div class="outline">
                <img
                    ref="outlineIcon"
                    class="outline-icon"
                    src="../../assets/outline-icon.png"
                />
                <div class="outline-text">请将上半身置于人像框内</div>
            </div>
        </div>
        <section class="bottom-btns">
            <div class="btn btn1" @click="reUpload">重新上传</div>
            <div class="btn btn2" @click="nextStep">下一步</div>
        </section>
    </div>
</template>

<script lang="ts" setup name="clipPage">
import { onMounted, reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { apiUploadFile } from "../../utils/api";
import { useNoloStore } from "../../store";
import { Toast } from "vant";
import "vue-cropper/dist/index.css";
import { VueCropper } from "vue-cropper";
import { ROUTER_NAME_PRODUCE_VIDEO_PAGE } from "../../route";

const store = useNoloStore();
const router = useRouter();
const route = useRoute();
const { imgSrc } = route.params;
const clipImg = ref();
const outlineIcon = ref();
const outlineIconHeight = ref(500);
const outlineIconWidth = ref(400);
const reUpload = () => {
    router.back();
};
const options = reactive({
    img: imgSrc, // 裁剪图片的地址
    outputType: "jpg", // 裁剪生成图片的格式 jpeg, png, webp
    autoCrop: true, // 是否默认生成截图框
    fixedBox: false, // 固定截图框大小
});
const nextStep = () => {
    clipImg.value.getCropBlob((blob: any) => {
        let file = new File([blob], "crop.jpg", {
            type: "image/jpg",
            lastModified: Date.now(),
        });
        onUpload(file);
    });
};
onMounted(() => {
    outlineIcon.value.onload = () => {
        outlineIconHeight.value = outlineIcon.value.height;
        outlineIconWidth.value = outlineIcon.value.width;
    };
});

const onUpload = async (file: File) => {
    Toast.loading({
        message: "图片上传中...",
        forbidClick: true,
        loadingType: "circular",
        duration: 0,
    });
    const fm = new FormData();
    // 第三个参数是文件名
    fm.append("files", file, file.name);
    apiUploadFile(fm)
        .then((imgsRes) => {
            const imgId = imgsRes[0].fileId;
            Toast.clear();
            // location.href = `https://zkvideo.nolovr.com/migucrbt/${imgId}.jpg`;
            // redirect(imgId);
            router.push({
                name: ROUTER_NAME_PRODUCE_VIDEO_PAGE,
                params:{
                    imgId:imgId
                }
            });
        })
        .catch((e) => {
            Toast("上传失败");
        });
};
</script>

<style lang="less" scoped>
@import url(../../style/index.less);
.bg {
    position: relative;
    background-color: black;
    height: 100vh;
    width: 100vw;
    padding-top: 34px;
    padding-bottom: 130px;

    .edit-wrap {
        position: relative;
        margin: 0 auto;
        width: 85vw;
        height: 500px;
        :deep(.cropper-box) {
            //设置拖拽背景色
            background-color: rgba(0, 0, 0, 1) !important;
        }
        //隐藏裁剪框
        :deep .cropper-crop-box {
            display: none;
        }
        //隐藏遮罩层
        :deep .cropper-modal {
            background-color: transparent;
        }
        .outline {
            pointer-events: none;

            position: absolute;
            width: 100%;
            left: 0;
            top: 50%;
            right: 0;
            height: 100%;
            transform: translateY(-50%);
            .outline-icon {
                width: 100%;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                left: 0;
                pointer-events: none;
            }
            .outline-text {
                position: absolute;
                bottom: -67px;
                pointer-events: none;
                // margin-top: 67px;
                color: rgba(255, 255, 255, 0.7);
                width: 100%;
                text-align: center;
                font-size: 14px;
            }
        }
    }
    .flexable {
        flex: 1;
    }

    .bottom-btns {
        position: absolute;
        bottom: 70px;
        left: 0;
        right: 0;
        height: 45px;
        display: flex;
        justify-content: center;
        .btn {
            width: 148px;
            height: 100%;
            text-align: center;
            line-height: 45px;
        }
        .btn1 {
            color: white;
            border: 1px solid white;
            border-radius: 22.5px;
            margin-right: 27px;
        }
        .btn2 {
            color: black;
            border-radius: 22.5px;
            background: linear-gradient(
                318deg,
                #21d7fe 0%,
                #42ffe1 47%,
                #c4ffba 100%
            );
        }
    }
}
</style>
